import { useComponentsStore } from "../../store/components";
import type { Components } from "../../store/components";
// import type { ComponentConfig } from "../../store/component-config";
import { useComponentConfigStore } from "../../store/component-config";
import React, { useEffect } from "react";




function Editor() {

  const { compoents, addComponent } = useComponentsStore();
  const { componentConfig } = useComponentConfigStore()

  function RenderComponents(components: Components[]): React.ReactNode {
    return components.map((component: Components) => {
      const config = componentConfig?.[component.name]
      if (!config?.component) { // 没有对应的组件，比如：'Page'
        return null
      }
      // 渲染组件
      return React.createElement(
        config.component,
        {
          key: component.id,
          id: component.id,
          name: component.name,
          ...config.defaultProps,
          ...component.props
        },
        RenderComponents(component.children || [])  // 递归渲染整个 json 树
      )
    })
  }


  // useEffect(() => {
  //   addComponent({
  //     id: 2,
  //     name: 'Button',
  //     props: {
  //       text: '提交',
  //     },
  //     desc: '按钮组件',
  //     children: [],

  //   }, 1)
  // }, [])
  return (
    <div className=" h-[100%]">
      {RenderComponents(compoents)}
    </div>
  )
}
export default Editor;